<template>
  <div>
    <at-table
      :data="tableData"
      @row-click='RowClick'
      style="width: 100%">
      <at-table-column
        prop="date"
        label="日期"
        width="180">
      </at-table-column>
      <at-table-column
        prop="name"
        label="姓名"
        width="180">
      </at-table-column>
      <at-table-column
        prop="address"
        label="地址">
      </at-table-column>
    </at-table>
    <right-expand
      :modal="false"
      :visible.sync="expandVisible"
      size="tiny"
      :before-close="handleClose"
      type='min'
      :size-change='true'
      >
      <span slot="headline">
       1111
        一级标题，基础字体大小颜色已给出，如有其它需要，请自行调整
      </span>
      <span slot="subhead">
         二级标题，基础字体大小颜色已给出，如有其它需要，请自行调整
      </span>
      <span>
         表格内容
         内容表格内容表格内容表格内容表格内容表格内容
         内容表格内容表格内容表格内容表格内容表格内容
         <div class="red"></div>

      </span>
    </right-expand>
  </div>
  </template>

  <script>
    export default {
      data() {
        return {
          index:null,
          expandVisible: false,
          tableData: [{
            id:1,
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            id:2,
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            id:3,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            id:4,
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },
          {
            id:5,
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            id:6,
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },{
            id:7,
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },{
            id:8,
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }]
        }
      },
      methods:{
        RowClick(row,event,column){
          this.expandVisible = true;
        //   if(row.id==this.index&&this.expandVisible==true){
        //     this.expandVisible = false
        //   }else {
        //     this.expandVisible = true;
        //   }
        //   this.index=row.id;
        },
        handleClose(done) {
          done();
        }
      }
    }
  </script>
  <style>
/*    .red{
      height: 3000px;
      width: 30px;
      background: red;
    }*/
  </style>